<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="static/css/base.css">

    <link rel="stylesheet" href="http://kindeditor.net/ke4/themes/default/default.css">

    <style>
        .app {
            width: 940px;
            margin: 0 auto;
        }

        .kindeditor_each_textarea {
            width: 940px;
            height: 400px;
            visibility: hidden;
        }



        .art_img_container {
            margin: 10px 0px;
        }

        .art_img_container.inline-block-container>.img_each {
            display: inline-block;
            font-size: 0px;
        }

        .art_img_container>.img_each:not(:first-child) {
            margin-left: 20px;
        }

        .art_img_container {
            width: 100%;
            overflow: hidden;
        }

        .art_img_container.inline-block-container[type="2"]>.img_each {
            width: 460px;
            height: 300px;
            overflow: hidden;
            /* border: 1px red solid; */
        }

        .art_img_container.inline-block-container[type="3"]>.img_each {
            width: 300px;
            height: 300px;
            overflow: hidden;
            /* border: 1px red solid; */
        }


        .art_img_container.inline-block-container[type="1"]>.img_each {
            width: 300px;
            height: 300px;
            overflow: hidden;
            /* border: 1px red solid; */
        }

        .art_img_container.inline-block-container[ht="200"]>.img_each {
            height: 200px;
        }

        .art_img_container.inline-block-container[ht="300"]>.img_each {
            height: 300px;
        }






        .img_tools {
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
        }
    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

    <div id="app" class="app">

        
        <div class="card-body mt_20 clearfix" v-for="part in listData">
            <textarea name="content" class="kindeditor_each_textarea">{{part.content}}</textarea>
            <div class="img_tools">
                <el-radio v-model="part.imgType" label="1">每行一张</el-radio>
                <el-radio v-model="part.imgType" label="2">每行两张</el-radio>
                <el-radio v-model="part.imgType" label="3">每行三张</el-radio>


               

                <el-radio v-model="part.ht" label="200">高200</el-radio>
                <el-radio v-model="part.ht" label="300">高300</el-radio>

            </div>
            <div class="art_img_container inline-block-container" :type="part.imgType" :ht="part.ht">
                <img class="img_each" :src="part.imgUrlOne||'static/images/plus.jpg'" alt="">
                <img class="img_each" :src="part.imgUrlTwo||'static/images/plus.jpg'" alt="">
                <img class="img_each" v-if="part.imgType!=2" :src="part.imgUrlThree||'static/images/plus.jpg'" alt="">
            </div>
        </div>


    </div>






    <script src="http://kindeditor.net/ke4/kindeditor-min.js"></script>
    <script src="http://kindeditor.net/ke4/lang/zh-CN.js"></script>

    <script src="static//js/jquery.SuperSlide.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        var pageVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    visible: false,
                    editor: null,


                    listData: [{
                        id: 1,
                        content: "111111111",
                        imgType: 2,
                        imgUrlOne: 'https://pic4.40017.cn/line/admin/2017/02/10/10/lfmoyX.jpg',
                        imgUrlTwo: 'https://pic4.40017.cn/line/admin/2017/02/10/10/ebkYsr.jpg',
                        imgUrlThree: '',
                        ht: '300'

                    }]
                }
            },
            mounted: function () {

                KindEditor.ready(function (K) {


                    $('textarea[name="content"]').each(function () {
                        K.create(this, {
                            allowFileManager: true
                        });
                    });





                });
            }
        })
    </script>


    <script>


    </script>


</body>

</html>